<template>
  <el-card class="myanxu-container">
    <el-button
      class="exportExcel"
      type="primary"
      icon="el-icon-download"
      size="small"
      @click="exportExcel"
      >导出</el-button
    >
    <el-table
      :data="myAnxuList"
      type="border-card"
      style="width: 100%"
      height="668"
      v-loading="loading"
      :element-loading-text="loadingText"
    >
      <el-table-column prop="cname" label="公司名称"> </el-table-column>
      <el-table-column prop="date" label="到期时间"> </el-table-column>
      <el-table-column prop="lperson" label="公司法人"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            @click="$router.push(`/enterprise/detail/${scope.row.cname}`)"
            type="text"
            size="small"
            >查看</el-button
          >
          <el-button
            @click="openAddFollowDialog(scope.row.id)"
            type="text"
            size="small"
            >添加</el-button
          >
        </template>
      </el-table-column>
      <template slot="empty">
        <el-empty :image-size="200" description="暂无我的安许"></el-empty>
      </template>
    </el-table>
    <!-- 过期弹窗提醒 -->
    <div class="alert">
      <el-alert
        v-for="item in openMessageList"
        :key="item.cname"
        title="您有安许即将到期！"
        type="warning"
        show-icon
      >
        <template v-slot:default>
          <!-- 点击文字可跳转 查看详情 -->
          <div @click="$router.push(`/enterprise/detail/${item.cname}`)">
            <div>
              {{ item.cname }}
            </div>
            <div>到期时间：{{ item.date }}</div>
          </div>
        </template>
      </el-alert>
    </div>
    <!-- 分页组件 -->
    <div style="height: 60px; margin-top: 25px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[15, 30, 40]"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 添加 意向客户 弹窗-->
    <businessDialog
      :getMyAnxuList="getMyAnxuList"
      :showDialog="showDialog"
      :businessDialogTitle="businessDialogTitle"
      :company_id="company_id"
      @closeDialog="closeDialog"
    ></businessDialog>
  </el-card>
</template>

<script>
import { getMyAnxuListApi, exportMyIntentionExcelApi } from '@/api/anxu'
import businessDialog from '@/components/business-dialog'
export default {
  name: 'myanxu-page',
  data () {
    return {
      page: 1,
      page_size: 15,
      total: 0,
      myAnxuList: [],
      // 安许到期弹窗列表
      openMessageList: [],
      // 是否显示添加 意向客户弹窗
      showDialog: false,
      company_id: 0,
      loading: false,
      loadingText: '',
      // 添加弹窗标题
      businessDialogTitle: '添加意向客户',
      rows: [],
      excelTitle: ''
    }
  },
  components: {
    businessDialog
  },
  created () {
    this.getMyAnxuList()
  },
  methods: {
    // 获取 我的安许 列表
    async getMyAnxuList () {
      this.loading = true
      this.loadingText = '数据正在加载中!'
      const { data: res } = await getMyAnxuListApi(this.page, this.page_size)
      // console.log('获取安许资质', res)
      this.myAnxuList = [...res.data.lists]
      this.total = res.data.anxu_num
      // 弹窗列表数据
      this.openMessageList = res.data.expire_res ? [...res.data.expire_res] : []
      this.loading = false
      this.loadingText = ''
    },
    // 切换第几页
    handleCurrentChange (val) {
      this.page = val
      this.getMyAnxuList()
    },
    // 手动更改页码
    handleSizeChange (val) {
      this.page_size = val
      this.getMyAnxuList()
    },
    // 打开 添加意向客户 弹窗
    openAddFollowDialog (val) {
      this.showDialog = true
      this.company_id = val
    },
    // 关闭 添加意向客户 弹窗
    closeDialog () {
      this.showDialog = false
    },
    // 将表头数据和数据进行对应
    formatJson (rows, headersArr, headersRelations) {
      // [
      //   [ 值1, 值2, 值3, ... ]
      // ]
      const resultsArr = rows.map(item => {
        const arr = []
        headersArr.forEach(key => {
          const englishKey = headersRelations[key]
          const value = item[englishKey]
          arr.push(value)
        })
        return arr
      })
      return resultsArr
    },
    // 导出我的安许客户Excel
    async exportExcel () {
      const { data: res } = await exportMyIntentionExcelApi()
      // console.log('导出我的安许客户Excel', res)
      this.rows = [...res.data.list]
      this.excelTitle = `${res.data.userName}安许客户表`
      // 准备一个可枚举的表头
      const headersArr = ['公司名称', '联系方式', '客户名称']
      // 找到字段对应的  中英文
      const headersRelations = {
        公司名称: 'cname',
        联系方式: 'mobile',
        客户名称: 'lperson'
      }
      // 这里是表格中的数据 必须是数组
      const dataArr = this.formatJson(this.rows, headersArr, headersRelations)
      // console.log(dataArr)
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: headersArr, // 表格的头部
          data: dataArr, // 二维数组 [ [], [], [] ]
          filename: this.excelTitle, // 导出的excel文件名
          autoWidth: true, // 是否开启单元格宽度自适应
          bookType: 'xlsx' // 类型
        })
      })
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.myanxu-container {
  box-sizing: border-box;
  height: 835px;
  padding: 25px 40px 0px;
  // .exportExcel {
  //   margin-left: 0px;
  // }
  .alert {
    overflow: auto;
    height: 410px;
    z-index: 10;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 270px;
    .el-alert {
      margin-bottom: 10px;
    }
    ::v-deep .el-alert__icon.is-big {
      color: #f56c6c;
    }
  }
}
</style>
